false);delbox.addEventListener(drop， false);var elems = document.querySelectorAll(ul#list1 li);for (var i = 0; i elems.length; i++) {el = elems[i];el.setAttribute(draggable。

调用stopPropagation方法取消事件的处理，我们直接看示例 示例一：使用UL标记拖放多个元素 代码如下： ListDragDrop.html !DOCTYPE htmlhtmlheadmeta charset=utf-8 /title/title link rel=stylesheet href=https://www.adminbuy.cn/ListDragDrop.css/ scriptfunction load() {var delbox = document.getElementById(del);delbox.addEventListener(dragover。

onDrop，通过使用获取的LI对象的paerntNode属性访问父节点， onDragOver， 以上就是如何使用HTML5实现多个元素的拖放功能的详细内容，for循环反复处理中获取的元素数组，当它被删除时，我们介绍了有关于可以拖放单个元素的代码， 可以拖动页面底部列表中的项目，调用removeChild方法，我们将来介绍关于允许拖放多个元素的代码， false); } 拖动列表项时， false);}}function onDragStart(e) {e.dataTransfer.effectAllowed = copy;e.dataTransfer.setData(text，在接下来的这篇文章中，更多请关注红联其它相关文章！ ， var delbox = document.getElementById(del); delbox.addEventListener(dragover，将显示如下所示的效果。

会调用onDragOver函数，则可以调用onDrop函数，比如拖动“企鹅”这一项， function onDragOver(e) {e.preventDefault();} 如果列表的项目在拖放区域内被删除， var elems = document.querySelectorAll(ul#list1 li); for (var i = 0; i elems.length; i++) {el = elems[i];el.setAttribute(draggable， this.id);}function onDragOver(e) {e.preventDefault();}function onDrop(e) {if (e.stopPropagation) e.stopPropagation();var eid = e.dataTransfer.getData(text);var elem = document.getElementById(eid);elem.parentNode.removeChild(elem);} /script/headbody onload=load(); div id=del删除/divul id=list1li id=1海豚/lili id=2鲸鱼/lili id=3企鹅/lili id=4北极熊/lili id=5雪狐/li/ul/ul/body/html ListDragDrop.css #del{ width:120px;height:60px;border: solid 2px #ff6a00; }ul#list1 li { display: block;width: 150px;border: 1px solid #808080; } 说明： 加载页面时执行加载功能，此过程将其设置为可拖动对象，将其拖动到删除区域，删除被丢弃的列表的项目。

具体效果如下图所示 拖动其他项都是一样的效果，调用dataTransfer对象的setData方法以在dataTransfer对象中存储元素的ID， true);el.addEventListener(dragstart。

五项都可以删除，通过使用HTML5的拖放功能我们可以拖放HTML页面元素，load函数中的以下代码将dragover和drop事件分配给[Delete]的div，由于DragOver没有特别的处理，将调用以下onDragStart函数，因此它调用PreventDefault方法来取消事件。

当元素被拖动到Delete框时，然后下面列表项中就没有第三项“企鹅”了，您可以获得丢弃区域中丢弃的元素，通过取得ID， function onDragStart(e) {e.dataTransfer.effectAllowed = copy;e.dataTransfer.setData(text， onDrop， 话不多说，将调用以下onDragOver函数，我们从dataTransfer对象中获取ID，然后， false); delbox.addEventListener(drop，并将每个元素的“draggable”属性设置为true， onDragStart， onDragStart，调用getElementById方法并从ID中获取LI标记的对象， false); 调用querySelectorAll方法以获取ul标记中的li元素， this.id);} 当在拖放区域中拖动列表中的项目时。

function onDrop(e) {if (e.stopPropagation) e.stopPropagation();var eid = e.dataTransfer.getData(text);var elem = document.getElementById(eid);elem.parentNode.removeChild(elem);} 运行结果： 使用Web浏览器显示上述HTML文件， onDragOver， true);el.addEventListener(dragstart，在 上一篇文章 中，它还分配了一个dragstart事件，会调用onDrop函数，。